<template>
  <el-container>
    <el-header>
      <div class="div_img">
        <img style="width: 240px; height: 331px" :src="filmInfo.filmPicture" />
      </div>
      <div class="div_detail">
        <div class="div_info">
          <h2>{{ filmInfo.filmName }}</h2>
          <div>{{ filmInfo.filmEnName }}</div>
          <ul style="margin-top: 10px">
            <li>{{ filmInfo.categoryList }}</li>
            <li>{{ filmInfo.area.fareaName }}/{{ filmInfo.filmLength }}分钟</li>
            <li>{{ filmInfo.filmShowTime }} 上映</li>
          </ul>
        </div>
        <div class="div_scoring">
          <el-button plain icon="el-icon-s-opportunity" @click="wanted">想看</el-button
          ><el-button icon="el-icon-star-off" @click="toEvaluation">评分</el-button>
        </div>
        <div class="div_status">
          <div>梓晨口碑</div>
          <span>{{ filmInfo.filmScore }}</span>
          <star size="48" :score="filmInfo.filmScore"></star>
          <div>累计票房</div>
          <div style="margin-top:10px"><span style="color:white;font-size:26px">54.13</span>亿</div>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside>
        <el-tabs v-model="activeName">
          <el-tab-pane class="intro" label="介绍" name="intro">
            <div class="font_18 el-icon-caret-right">剧情简介</div>

            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              readonly
              v-model="filmInfo.filmSummary"
            >
            </el-input>
            <div class="font_18 el-icon-caret-right">精彩短评</div>
            <div class="comment" v-for="(item, i) in evaluationList" :key="i">
              <el-avatar :size="50" :src="item.memberAvatar"></el-avatar>
              <span class="memberInfo">
                <span>{{ item.nickName }}</span>
                <div>
                  <span>
                    <star size="48" :score="item.score"></star>{{ item.score }}
                  </span>
                  <span class="time">{{ item.evaDate }}</span>
                </div>
              </span>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2 }"
                readonly
                v-model="item.comment"
              >
              </el-input>
              <el-divider v-if="i != evaluationList.length - 1"></el-divider>
            </div>
          </el-tab-pane>
          <el-tab-pane label="演职员表" name="actor">
            <div class="director">
              <div class="case_type">导演</div>
              <ul class="clearfix">
                <li v-for="(elem,i) in directorList" :key="i">
                  <img :src="elem.directorPhoto" style="width:128;height:170;">
                  <div>
                    <span>{{elem.directorName}}</span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="actor">
              <div  class="case_type">演员</div>
                <ul class="clearfix">
                <li v-for="(elem,i) in actorList" :key="i">
                  <img :src="elem.actorPhoto" style="width:128;height:170;">
                      <div>
                    <span>{{elem.actorName}}</span>
                    <br>
                    <span class="role">饰：{{elem.playRole}}</span>
                  </div>
                </li>
              </ul>
              </div>
              
           
          </el-tab-pane>
          <el-tab-pane label="图集" name="stills">图集</el-tab-pane>
        </el-tabs>
      </el-aside>
      <el-main>
        <div class="main_container">
        <div class="font_18">购票链接</div>
        <el-table
    :data="playList"
    border
    style="width: 100%">
    <el-table-column
      prop="hallName"
      label="影厅"
      width="60">
    </el-table-column>
    <el-table-column
      prop="playOpenTime"
      label="开始时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="price"
      label="票价"
      width="60">
      <template slot-scope="scope">
         ¥ {{scope.row.price}}
      </template>
     
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
         <el-button type="primary" @click="toSelectSeat(scope.row.playId,scope.row.filmId,scope.row.playOpenTime)">选座购票</el-button>
      </template>
     
    </el-table-column>
  </el-table>

 <el-dialog
 class="dialog"
  title="评价"
  :visible.sync="dialogVisible"
  width="30%"
  >
 <div v-if="value != 0">{{value*2}}分</div>
 <div v-else style="color:#ffc600;">滑动下方星星进行评分</div>
 <el-rate v-model="value" allow-half show-text :texts="['极差', '失望', '一般', '满意', '惊喜']"></el-rate>
<el-input
  type="textarea"
  :rows="5"
  placeholder="快来说说你的看法"
  v-model="textarea">
</el-input>
  <span slot="footer">
    <el-button type="primary" @click="submitEva">提交</el-button>
  </span>
</el-dialog>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import star from "../components/starScore";
export default {
  components: {
    star: star,
  },
  data() {
    return {
      value:null,
      activeName: "intro",
      filmInfo: {},
      categoryArray: [],
      evaluationList: [],
      playList:[],
      directorList:[],
      actorList:[],
       dialogVisible: false,
       textarea:''
    };
  },
  created() {
    this.getFilmInfo()
    this.getFilmEvaluation()
    this.getPlayList()
    this.getDirectorList()
    this.getActorList()
  },
  methods: {
    getFilmInfo() {
      console.log(this.$route.query);
      var thisFilm = JSON.parse(this.$route.query.filmInfo);
      console.log(thisFilm);
      sessionStorage.setItem('filmId',thisFilm.filmId)
      thisFilm.categoryList.forEach((element) => {
        this.categoryArray.push(element.cateName);
      });
      thisFilm.categoryList = this.categoryArray.join(" ");
      this.filmInfo = thisFilm;
    },
    async getFilmEvaluation() {
      const { data: res } = await this.$http.get("/common/evaluation/getListByFilm", {
        params: { filmId: this.filmInfo.filmId },
      });
      console.log(res);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.evaluationList = res.data;
      }
    },
    async getPlayList() {
      const { data: res } = await this.$http.get("/common/filmplay/getListByFilmId",{params:{id:this.filmInfo.filmId}});
      console.log(res);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.playList = res.data;
      }
    },
    toSelectSeat(playId,filmId,openTime){
      sessionStorage.setItem('playId',playId)
              this.$router.push({
             name:'seat',
              query:{
                filmId:filmId,
                openTime:openTime
              },
            
              })
    },
    async getDirectorList(){
      const {data:res} = await this.$http.get('/common/director/getDirectorByFilmId',{params:{id:this.filmInfo.filmId}})
      if(res.code != 200){
       return this.$message.error(res.message)
      }
      else{
      this.directorList= res.data
      }
    },
        async getActorList(){
      const {data:res} = await this.$http.get('/common/actor/getActorByFilmId',{params:{id:this.filmInfo.filmId}})
      if(res.code != 200){
       return this.$message.error(res.message)
      }
      else{
      this.actorList= res.data
      }
    },
    toEvaluation(){
      debugger
      if(sessionStorage.getItem('memberId') == null){
        this.$message.warning("请先登录")
        // this.$router.push('/login')
      }
      else{
        this.dialogVisible = true
      }
    },
    async submitEva(){
      this.dialogVisible = false
      let evaluation = {}
      evaluation.score = this.value*2
      evaluation.comment = this.textarea
      evaluation.memberId = sessionStorage.getItem('memberId')
      evaluation.filmId = this.filmInfo.filmId
      evaluation.evaDate = this.formatDate(new Date(),2)
      const {data:res} = await this.$http.post('common/evaluation/saveEvaluation',evaluation)
      if(res.code != 200){
       return this.$message.error(res.message)
      }
      else{
       location.reload()
      }
    },
    wanted(){
      this.$message.success('想看 +1')
    }
  

  },
};
</script>

<style lang="less" scoped>
.el-header {
  position: relative;
  height: 370px !important;
  background: #392f59 url("../assets/image/detail_back.png") no-repeat 50%;
  .div_img {
    img {
      margin-left: 173px;
      margin-top: 73px;
    }
  }
  .div_detail {
    position: absolute;
    top: 73px;
    left: 477px;
    color: #fff;
    li {
      list-style-type: none;
    }
    .div_scoring {
      margin-top: 30px;
    }
    .div_status {
      position: relative;
      left: 259px;
      top: -69px;
      span {
        color: orange;
        font-size: 30px;
      }
    }
  }
}
.el-aside {
  width: 65% !important;
  height: 100%;
  overflow: unset;
  margin-right: 30px;
  /deep/.el-tabs__item {
    font-size: 20px !important;
  }
  .el-tabs {
    margin-top: 52px;
    margin-left: 117px;

    /deep/ textarea {
      border: 0;
    }
  }
  /deep/.el-tabs__active-bar {
    background-color: red !important;
  }
  /deep/.el-tabs__item.is-active {
    color: red;
  }
  /deep/.el-tabs__item:hover {
    color: black;
  }
}
.el-main {
  height: 100%;
}
.font_18 {
  font-size: 18px;
  display: block;
  margin: 20px 0;
}
.el-icon-caret-right:before {
  color: red;
}
.el-avatar--circle {
  border: 1px solid rgba(0, 0, 0, 0.23);
}
.comment {
  .memberInfo {
    position: relative;
    top: -31px;
    left: 18px;
  }
  .el-textarea {
    padding-left: 45px;
    box-sizing: border-box;
    margin-top: -18px;
  }
  .time{
          margin-left: 14px;
    font-size: 13px;
    color: #8d8787;
  }
  /deep/img{
    width:50px;
    height:50px
  }
}
.star {
  margin-left: 46px;
  margin-right: 10px;
  margin-top: 10px;
}
.main_container{
  margin-top: 52px;
}
.actor ul,.director ul{
  list-style: none;
  li{
    float: left;
    width: 128px;
    margin-left: 20px;
    margin-bottom: 20px;
    span{
      width: 100%;
      text-align: center;
      display: inline-block;
    }
    .role{
      font-size: 14px;
    line-height: 1.2;
    color: #666;
    }
  }
      

}
.case_type{
  margin-bottom: 16px;
  margin-left: 20px;
}
.clearfix:after, .clearfix:before {
    content: " ";
    display: table;
    clear: both;
}
.dialog{
  div{
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>